<template>
  <div class="login-container">
    <el-form
      ref="ruleForm"
      label-width="100px"
      :rules="loginRules"
      :model="form"
    >
      <h3>
        <img src="../../assets/common/login-logo.png" alt="" />
      </h3>
      <el-form-item prop="mobile">
        <el-input
          prefix-icon="el-icon-user-solid"
          v-model="form.mobile"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          prefix-icon="el-icon-lock"
          type="password"
          show-password
          v-model="form.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-button type="primary" @click="login" :loading="loading" class="logbtn"
        >登录</el-button
      >
      <p class="p1">还没账号？请点击注册</p>
    </el-form>
  </div>
</template>

<script>
import { validateMoblie } from "@/utils/validate";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      loading: false,
      form: {
        mobile: "13800000002",
        password: "123456",
      },
      loginRules: {
        mobile: [
          { required: true, trigger: "blur", message: "手机号不能为空" },
          {
            validator: validateMoblie,
          },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
          {
            min: 4,
            max: 10,
            message: "密码的长度在4-10位之间 ",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapActions({ userlogin: "user/login" }),
    ...mapActions({ setusinfo: "user/getInfoapi" }),
    login() {
      this.$refs.ruleForm.validate(async (res) => {
        if (res) {
          this.loading = true;
          try {
            await this.userlogin(this.form);

            if (this.$route.query.back) {
              this.$router.push(this.$route.query.back);
            } else {
              this.$router.push("/dashboard");
            }
            this.$message.success({
              message: "欢迎你，登录成功！",
            });
            // this.setusinfo();
          } catch (err) {
            console.log("登录出错", err.message);
          } finally {
            this.loading = false;
          }
        }
      });
    },
  },
};
</script>

<style lang='scss'>
.login-container {
  height: 100%;
  background: url("../../assets/common/login.jpg") center;

  .el-form {
    width: 450px;
    margin: 0 auto;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -225px;
    margin-top: -200px;
    h3 {
      margin-bottom: 30px;
    }
    .el-input__inner {
      background-color: rgba(212, 229, 255);
    }
    .el-form-item__content {
      margin-left: 0 !important;
    }
    .logbtn {
      width: 450px;
      background-color: rgba(64, 128, 254);
    }
    .p1 {
      margin-top: 30px;
      color: rgb(242, 244, 247);
      text-align: center;
    }
  }
}
</style>